/* eslint-disable */
<template>
  <div class="index">
    <mt-header fixed :title="title">

    </mt-header>

    <mt-tab-container v-model="active">
      <mt-tab-container-item id="tab-container1">
        <ul  v-infinite-scroll="getList"
             infinite-scroll-disabled="loading"
             infinite-scroll-distance="10" >
          <li v-for="item  in list" :key="item.contentId">
            <a class="title-box" @click="toArticle(item.contentId)" >
              <span class="title" v-html="item.title"></span>
              <span class="date">{{getDateDiff(item.releaseDate)}}</span>
            </a>
            <div class="desc" v-html="item.description">
            </div>
            <div class="info">
              <span class="info-item comments" title="Views">Views:{{item.views}}</span>
              <span class="info-item comments" title="Comments">Comments:{{item.comments}}</span>
              <span class="info-item author" title="Author">Author:{{item.user.username}}</span>
            </div>
          </li>
        </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab-container2">
        A岛已经凉了
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="1">
        <img slot="icon" src="../assets/icon1.png">
        文章区
      </mt-tab-item>
      <mt-tab-item id="2">
        <img slot="icon" src="../assets/island.png">
        A岛
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import fetch from '../utils/fetch'
  let apiurl = 'https://acfun.leanapp.cn/acfun/contents?pageNo={pageNo}';
  import { mapGetters } from 'vuex';

  export default{
    data(){
      return {
        loading:false,
        selected:'1',
        title:'文章区',
        active:'tab-container1',
        pageNo:0,
        lastContentId:0
      }
    },
    computed: {
      ...mapGetters([
        'list'
      ])
    },
    methods:{
      getDateDiff(dateTimeStamp){
        let result;
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var now = new Date().getTime();
        var diffValue = now - dateTimeStamp;
        if(diffValue < 0){return;}
        var monthC = diffValue/month;
        var weekC = diffValue/(7*day);
        var dayC = diffValue/day;
        var hourC = diffValue/hour;
        var minC = diffValue/minute;
        if(monthC >= 1){
          result = "" + parseInt(monthC) + "月前";
        }
        else if(weekC >= 1){
          result = "" + parseInt(weekC) + "周前";
        }
        else if(dayC >= 1){
          result = ""+ parseInt(dayC) +"天前";
        }
        else if(hourC >= 1){
          result = ""+ parseInt(hourC) +"小时前";
        }
        else if(minC >= 1){
          result = ""+ parseInt(minC) +"分钟前";
        }else
          result = "刚刚";
        return result;
      },
      getList(){
        if(this.selected =='2')return
        this.pageNo++;
        let url = apiurl.replace('{pageNo}',this.pageNo)
        this.loading = true;
        fetch.get(url).then(response=>{
          let datalist = response.data.data?response.data.data.list:[];
          this.loading = false;
          {
            this.lastContentId = datalist[datalist.length-1].contentId;
          }
          datalist.forEach(e=>{
            if(e.contentId!=this.lastContentId){
              this.$store.dispatch('addContent',{content:e,index:1}).then(()=>{
              })
            }
          });
        }).catch(error=>{
          console.log(error)
        })
      },
      toArticle(id){
        this.$router.push(`/article/${id}`)
      }
    },
    watch:{
      selected(val){
        this.active = 'tab-container'+val
        if(val=='2'){
          this.title = 'A岛'
        }else {
          this.title = '文章区'
        }
      }
    },
    created(){
      this.getList()
    }

  }
</script>
<style scoped>
  ul{
    padding: 0;
    margin: 0;
  }
  .title-box{
    border-top: 1px  solid #ccc;
    border-width: thin;
    padding-top: 5px;
    display: flex;
    text-decoration: none;
    color: #333333;
  }
  .index{
    padding-bottom: 60px;
  }
  .title{
    flex-grow: 1;
    padding-right: 10px;
  }
  .date{
    text-align: right;
    color: #ccc;
    font-size: 0.8em;
    flex-shrink: 0;
  }
  .desc{
    color: #656565;
    font-size: 0.8em;
    padding: 5px 0;
  }
  .info{
    display: flex;
    font-size: 0.8em;
    color: #ccc;
  }
  .info-item{
    align-self: flex-end;
    flex: 1;
  }
  .author{
    flex-grow: 2;
    flex-shrink: 0;
  }
  li{
    list-style: none;
    text-align: left;
    padding: 5px 0;
  }

  @media (min-width: 750px) {
    .info{
      display: none;
    }
  }
</style>
